<template>
  <div :class="isShow?'alldiv':'alldiv_inner'" class=" div_a_blur_black " v-show="realstart" :style="{'width':width+'px','height':height+'px'} "  ref="selfs" >
    <slot v-if="isReady"></slot>
  </div>

</template>
<!--使用帮助
1.传入组件的信息
  width:可空默认100
  height:可空默认100
  fiexd:可空默认false,如果设置true则不按照鼠标位置显示,按照固定位置显示
  maxCount:可空默认1,决定鼠标出去多少次才会关闭此message,修正一般为2
  maxLife:可空,生命存在时间默认15秒,单位:秒
  触发事件可以选择:
    element:可空,绑定的元素组件
    event:可空,默认click,可以选择click right-click focus
  -----------------------------------------------
    start是一个暴露的函数,可以直接调用触发

注意此组件是absolute的位置的,是根据屏幕的位置来的,
如果你将这个组件的位置放在了其他div里,那可能会出现位置显示错误等情况
-->
<script setup>
import {onMounted, ref} from "vue";
import {main} from "@/store/store";
let isReady= ref(false)
defineExpose({
  start:function (){
    setTimeout(server,300)

  }
})
let ps=defineProps({
  width:{
    default:function (){
      return 100;
    }
  },
  height:{
    default:function (){
      return 100;
    }
  },
  element:{
    default:null
  },
  event:{
    default:function (){
      return "click"
    }
  },
  flexd:{
    default:function (){
      return "false";
    }
  },
  maxCount:{
    default:1
  },
  maxLife:{
    default:15
  }

})
let isShow =ref(false)
let selfs=ref(null)
let realstart=ref(false);
let x=ref("")
let y=ref("")
// 用户鼠标缓冲阈值
let count=0;
let maxCount=ps.maxCount
function over(){
  isShow.value=false;
  isReady.value=false;
  count=0
  selfs.value.onmouseleave=()=>{}
  setTimeout(()=>{
    realstart.value=false
  },180)
}



function server(){
  realstart.value=true
  // 保证动画先出现后显示 再绑定关闭事件以防直接关闭的错误
  setTimeout(()=>{
    isReady.value=true
    //
    setTimeout(over,ps.maxLife*1000)
    selfs.value.onmouseleave=function(){
      count++;
      console.log(maxCount)
      if (count>=maxCount){
        over()
      }
    }
  },210)
  //修改div位置到鼠标
  if (ps.flexd=="false"){
    selfs.value.style.left=main().mouseX-20+"px";
    selfs.value.style.top=main().mouseY+20+"px";
    isShow.value=true;
  }else if (ps.flexd=="true"){
    isShow.value=true;
  }



}
// 初始化代码绑定事件调用server
function init(){
  if (ps.element!=null){
    if (ps.event=="click"){
      ps.element.onclick=server;
    }else if (ps.event=="focus"){
      ps.element.onfocus=server;
    }else if(ps.event=="right-click"){
      ps.element.addEventListener('contextmenu', function(event) {
        // 阻止默认的右击菜单弹出
        event.preventDefault();
        // 执行绑定的表达式
        server();

      });
    }
  }

  selfs.value.onmouseleave=function (){}

}

//防止加载错误,设置1秒延迟
onMounted(()=>{
  setTimeout(init,1000)

})
</script>
<style scoped>
.alldiv{
  position: absolute;
    animation-name: dash;
    animation-duration: 0.2s;
  left: 0px;
  top:0px;
  z-index: 999;
}
.alldiv_inner{
  position: absolute;
  animation-name: over;
  animation-duration: 0.2s;
  left: 0px;
  top:0px;
  z-index: 999;
}
@keyframes dash {
  from{
    width: 0px;
    height: 0px;

  }
  to{}
}
@keyframes over {
  to{
    width: 0px;
    height: 0px;
    opacity: 0.3;
  }
}
</style>